<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="500" style="border: 1px solid;"></canvas>

</body>
<script>

    var c=document.getElementById("myCanvas"); // 1. 获取canvas dom节点引用
    var cxt=c.getContext("2d");                // 2. 创建上下文（context）环境
    /*cxt.fillStyle="#FF0000";                   // 3. 开始绘图
    cxt.fillRect(0,0,150,75);*/

    /*1. 绘制轮廓*/
    /*cxt.strokeStyle="#FF0000";
    cxt.strokeRect(100,0,150,175); // x,y,长 高*/

    /*2. 填充 */
    /*cxt.fillStyle="#9dffa1";
    cxt.fillRect(100,0,150,175);*/

    /*3.渐变*/
    var grd=
            cxt.createLinearGradient(0,0,100,50); // 线性渐变
            //cxt.createRadialGradient(0,0,20,30,30,20); //径向渐变

    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);

</script>
</html>